extends ../_layout

block active
  - sidebar_active = 'mailbox.html'

block content
  h3 MailBox

  .table-grid.table-grid-desktop
    .col.col-md
      .pr
        .clearfix.mb
          button.btn.btn-sm.btn-default.mb-toggle-button.pull-right.dropdown-toggle(type="button", data-toggle="collapse", data-target=".mb-boxes")
            em.fa.fa-bars.fa-fw.fa-lg
          a.btn.btn-purple.btn-sm.mb-compose-button(href="#")
            em.fa.fa-pencil
            span Compose
        // START mailbox list
        .mb-boxes.collapse
          .panel.panel-default
            .panel-body
              ul.nav.nav-pills.nav-stacked
                li.p
                  small.text-muted MAILBOXES
                li.active
                  a(href="#")
                    span.label.label-green.pull-right 42
                    em.fa.fa-fw.fa-lg.fa-inbox
                    span Inbox
                li
                  a(href="#")
                    span.label.label-green.pull-right 10
                    em.fa.fa-fw.fa-lg.fa-star
                    span Starred
                li
                  a(href="#")
                    span.label.label-green.pull-right 0
                    em.fa.fa-fw.fa-lg.fa-paper-plane-o
                    span Sent
                li
                  a(href="#")
                    span.label.label-green.pull-right 5
                    em.fa.fa-fw.fa-lg.fa-edit
                    span Draft
                li
                  a(href="#")
                    span.label.label-green.pull-right 0
                    em.fa.fa-fw.fa-lg.fa-trash
                    span Trash
                li.p
                  small.text-muted LABELS
                li.p-h
                  a.pv-sm(href='#') 
                    span.circle.circle-danger
                    span Red
                li.p-h
                  a.pv-sm(href='#') 
                    span.circle.circle-pink
                    span Pink
                li.p-h
                  a.pv-sm(href='#') 
                    span.circle.circle-info
                    span Blue
                li.p-h
                  a.pv-sm(href='#') 
                    span.circle.circle-warning
                    span Yellow

        // END mailbox list
    
    .col
      // START action buttons
      .clearfix.mb
        .btn-group.pull-left
          button.btn.btn-default.btn-sm(type="button")
            em.fa.fa-mail-reply.text-gray-dark
          button.btn.btn-default.btn-sm(type="button")
            em.fa.fa-mail-reply-all.text-gray-dark
          button.btn.btn-default.btn-sm(type="button")
            em.fa.fa-mail-forward.text-gray-dark
        .btn-group.pull-right
          button.btn.btn-default.btn-sm(type="button")
            em.fa.fa-exclamation.text-gray-dark
          button.btn.btn-default.btn-sm(type="button")
            em.fa.fa-times.text-gray-dark
      // END action buttons

      .panel.panel-default
        .panel-body
          // p.lead.text-centerNo mails here
          table.table.table-hover.mb-mails
            tbody
              // ngRepeat: mail in mails | filter:folder
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td.text-center
                  em.fa.fa-lg.fa-star-o.text-muted
                td
                  img.mb-mail-avatar.pull-left(alt='Mail Avatar', src='img/user/01.jpg')
                  .mb-mail-date.pull-right 10 minutes ago
                  .mb-mail-meta
                    .pull-left
                      .mb-mail-subject Admin web application
                      .mb-mail-from Evelyn Holmes
                    .mb-mail-preview
                      | Fusce gravida, diam ac adipiscing pretium, sem nibh bibendum diam, non consequat quam metus non nunc
              // end ngRepeat: mail in mails | filter:folder
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td.text-center
                  em.fa.fa-lg.fa-star-o.text-muted
                td
                  img.mb-mail-avatar.pull-left(alt='Mail Avatar', src='img/user/02.jpg')
                  .mb-mail-date.pull-right 1 day ago
                  .mb-mail-meta
                    .pull-left
                      .mb-mail-subject Admin theme based on Bootstrap and AngularJS
                      .mb-mail-from Allison Grant
                    .mb-mail-preview
                      | Nunc eget lacinia felis. 
                      b Pellentesque sollicitudin sollicitudin erat, in imperdiet tortor fringil
              // end ngRepeat: mail in mails | filter:folder
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td.text-center
                  em.fa.fa-lg.fa-star-o.text-muted
                td
                  img.mb-mail-avatar.pull-left(alt='Mail Avatar', src='img/user/03.jpg')
                  .mb-mail-date.pull-right 2 days ago
                  .mb-mail-meta
                    .pull-left
                      .mb-mail-subject Nested route mailbox application
                      .mb-mail-from Daryl Carlson
                    .mb-mail-preview
                      | Nulla 
                      strong facilisi
                      | . Sed sit amet sem vel purus pulvinar venenatis. Class aptent taciti
              // end ngRepeat: mail in mails | filter:folder
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td.text-center
                  em.fa.fa-lg.fa-star-o.text-muted
                td
                  img.mb-mail-avatar.pull-left(alt='Mail Avatar', src='img/user/04.jpg')
                  .mb-mail-date.pull-right 3 days ago
                  .mb-mail-meta
                    .pull-left
                      .mb-mail-subject Angular with lazy load components
                      .mb-mail-from George Clark
                    .mb-mail-preview
                      | Integer sit amet vulputate mauris. Proin purus nisl, tempor ut tempor at, ornare vel mauris. Ut ac l
              // end ngRepeat: mail in mails | filter:folder
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td.text-center
                  em.fa.fa-lg.fa-star.text-warning
                td
                  img.mb-mail-avatar.pull-left(alt='Mail Avatar', src='img/user/05.jpg')
                  .mb-mail-date.pull-right 4 days ago
                  .mb-mail-meta
                    .pull-left
                      .mb-mail-subject Translation ready and RTL support!
                      .mb-mail-from Bonnie Bowman
                    .mb-mail-preview
                      | Integer sit amet vulputate mauris. Proin purus nisl, tempor ut tempor at, ornare vel mauris. Ut ac l
              // end ngRepeat: mail in mails | filter:folder
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td.text-center
                  em.fa.fa-lg.fa-star-o.text-muted
                td
                  img.mb-mail-avatar.pull-left(alt='Mail Avatar', src='img/user/06.jpg')
                  .mb-mail-date.pull-right 5 days ago
                  .mb-mail-meta
                    .pull-left
                      .mb-mail-subject Don&apos;t forget to check latest updates!
                      .mb-mail-from Warren Watts
                    .mb-mail-preview
                      | Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In at conseq
              // end ngRepeat: mail in mails | filter:folder
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td.text-center
                  em.fa.fa-lg.fa-star.text-warning
                td
                  img.mb-mail-avatar.pull-left(alt='Mail Avatar', src='img/user/07.jpg')
                  .mb-mail-date.pull-right 6 days ago
                  .mb-mail-meta
                    .pull-left
                      .mb-mail-subject We have to meet someday
                      .mb-mail-from Elijah Ward
                    .mb-mail-preview
                      | Nunc hendrerit, neque ullamcorper eleifend ornare, arcu est bibendum ipsum, id malesuada sem justo v
              // end ngRepeat: mail in mails | filter:folder
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td.text-center
                  em.fa.fa-lg.fa-star.text-warning
                td
                  img.mb-mail-avatar.pull-left(alt='Mail Avatar', src='img/user/08.jpg')
                  .mb-mail-date.pull-right 7 days ago
                  .mb-mail-meta
                    .pull-left
                      .mb-mail-subject New issue found
                      .mb-mail-from Colleen Payne
                    .mb-mail-preview
                      | Integer sit amet vulputate mauris. Proin purus nisl, tempor ut tempor at, ornare vel mauris. Ut ac l
              // end ngRepeat: mail in mails | filter:folder
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td.text-center
                  em.fa.fa-lg.fa-star-o.text-muted
                td
                  img.mb-mail-avatar.pull-left(alt='Mail Avatar', src='img/user/09.jpg')
                  .mb-mail-date.pull-right 8 days ago
                  .mb-mail-meta
                    .pull-left
                      .mb-mail-subject Issue #5478 awaiting reply
                      .mb-mail-from Rose Fox
                    .mb-mail-preview
                      | Sed eu felis nulla. Nunc malesuada sapien at risus eleifend ut lacinia sem pretium.
              // end ngRepeat: mail in mails | filter:folder
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td.text-center
                  em.fa.fa-lg.fa-star.text-warning
                td
                  img.mb-mail-avatar.pull-left(alt='Mail Avatar', src='img/user/10.jpg')
                  .mb-mail-date.pull-right 9 days ago
                  .mb-mail-meta
                    .pull-left
                      .mb-mail-subject Check Angle for your next startup project
                      .mb-mail-from Jenny Knight
                    .mb-mail-preview
                      | Morbi varius sem quis purus suscipit tempus. Integer fermentum accumsan metus, id sagittis ipsum mol
              // end ngRepeat: mail in mails | filter:folder

